<!-- 原本test页面，现暂未使用 -->
<template>
  <div class="about">
    <!-- <div class="container" v-if="isShowWarning">
      <div class="ico"></div>
    </div>-->
    <topBar :title="aboutTitle">
      <!-- <template #weather>
        <div class="pos">
          <img
            class="weather-icon"
            :src="nowDayIcon"
            style="width:0.5rem;vertical-align: middle;"
            alt
          />
          <span class="weather-temp">{{ tmpNew }}°C{{ briefNew }}</span>
        </div>
      </template>-->
    </topBar>
    <div class="aboutContainer">
      
      <div class="containLeft">
        <div class="flex leftT">
          <div class="MonitorRunning">
            <h1>当前状态值</h1>
            <div id="gaugePanel" :style="sypanel2"></div>
            <div class="running flex">
              <div class="run">
                <img src="../assets/image/1.png" alt />
                <p>网络传输</p>
                <span class="successtag">[正常]</span>
              </div>
              <div class="run">
                <img src="../assets/image/2.png" alt />
                <p>防护栏</p>
                <span class="successtag">[正常]</span>
              </div>
              <div class="run">
                <img src="../assets/image/3.png" alt />
                <p>感应器</p>
                <span class="successtag">[正常]</span>
              </div>
            </div>
          </div>
        </div>

        <div class="wetstatus leftB">
          <h1>监控运行</h1>
          <div class="elbox1 boxW">
            <div class="left">
              <span>A区</span>
              <img src="../assets/image/wedet.png" alt />
            </div>
            <div class="center">
              <p>
                <span>温度：</span>
                <span class="strong">{{tem?tem:'--'}}</span>
                <span>℃</span>
              </p>
              <p>
                <span>湿度：</span>
                <span class="strong">{{hum?hum:'--'}}</span>
                <span>%</span>
              </p>
            </div>
            <div class="right">
              <div class="successState" v-if="tem">正常</div>
              <br />
              <div class="successState mt" v-if="hum">正常</div>
            </div>
          </div>
          <div class="elbox1 boxW">
            <div class="left">
              <span>--区</span>
              <img src="../assets/image/wedet.png" alt />
            </div>
            <div class="center">
              <p>
                <span>温度：</span>
                <span class="strong">--</span>
                <span>℃</span>
              </p>
              <p>
                <span>湿度：</span>
                <span class="strong">--</span>
                <span>%</span>
              </p>
            </div>
            <div class="right">
              <!-- <div class="successState">正常</div>
              <br />
              <div class="successState mt">正常</div>-->
            </div>
          </div>
          <div class="elbox1 boxW">
            <div class="left">
              <span>B区</span>
              <img src="../assets/image/wedet.png" alt />
            </div>
            <div class="center">
              <p>
                <span>温度：</span>
                <span class="strong">--</span>
                <span>℃</span>
              </p>
              <p>
                <span>湿度：</span>
                <span class="strong">--</span>
                <span>%</span>
              </p>
            </div>
            <div class="right">
              <!-- <div class="successState">正常</div>
              <br />
              <div class="successState mt">正常</div>-->
            </div>
          </div>
          <div class="elbox1 boxW">
            <div class="left">
              <span>D区</span>
              <img src="../assets/image/wedet.png" alt />
            </div>
            <div class="center">
              <p>
                <span>温度：</span>
                <span class="strong">--</span>
                <span>℃</span>
              </p>
              <p>
                <span>湿度：</span>
                <span class="strong">--</span>
                <span>%</span>
              </p>
            </div>
            <div class="right">
              <!-- <div class="successState">正常</div>
              <br />
              <div class="successState mt">正常</div>-->
            </div>
          </div>
        </div>
      </div>
      <div class="elbox1 containcenterBox">
        <div class="containcenter">
          <div class="containcenter_con">
            <!-- 地图外侧的图标 -->
            <p class="containcenter_top_title2">IoT人员行动轨迹——红木库房</p>
            <img style="width:100%;height:100%" src="../assets/image/center.png" alt />
            <div class="personDesc">
              <p>
                <img src="../../public/image/3.png" alt />
                <span>工作人员</span>
              </p>
              <p>
                <img src="../../public/image/0.png" alt />
                <span>参观嘉宾</span>
              </p>
            </div>
            <div
              style="position: absolute;top:56%;left:50%; transform: translate(-50%, -50%);z-index:100000;width:100%;height:90%"
            >
            <!-- 库房地图 -->
              <!-- <MapWrap /> -->
            </div>
          </div>
        </div>
      </div>
      <div class="containRight">
        <div class="r_status">
          <div class="left">
            <p class="ab l-value">监控预警</p>
            <img src="../assets/image/r_1.png" alt />
            <div class="flex ab2" style="width:96%;">
              <div style="margin-left:5%;width:100%;font-size: .14rem;">
                <p v-if="!isShowWarning" style="white-space: nowrap;text-align: center;">暂无预警信息</p>
                <p
                  class="time"
                >{{warningtimestamps.length>0?warningtimestamps[0].timestamp.dateTime[0].time:''}}</p>
                <p
                  class="events"
                >{{warningtimestamps.length>0?warningtimestamps[0].timestamp.dateTime[0].event:''}}</p>
              </div>
              <p style="align-self: center;height:50%">
                <img src="../assets/image/expand.png" alt />
              </p>
            </div>
          </div>
          <div class="right">
            <p class="ab l-value2">天气</p>
            <img src="../assets/image/r_2.png" alt />
            <div class="pos">
              <img
                class="weather-icon"
                :src="nowDayIcon"
                style="width:0.5rem;vertical-align: middle;font-size: .14rem;"
                alt
              />
              <span class="weather-temp">{{ tmpNew }}°C</span>
              <span>{{ briefNew }}</span>
            </div>
          </div>
        </div>
        <div class="checkStatus">
          <p class="containcenter_top_title">巡检状态</p>
          <div id="box">
            <p class="wrapBoxFlex center pTitle">
              <span>检查名称</span>
              <span>巡检次数</span>
              <span>当前状态</span>
            </p>
            <ul id="con2" ref="con2" :class="{ anim: animate == true }">
              <li class="wrapBoxFlex center" v-for="(item, index) in items2" :key="index">
                <!-- <p class="li_absolute">{{ item.num }}</p> -->
                <span class="noWarp">{{ item.num }}</span>
                <span class="noWarp">{{ item.date }}</span>
                <span :class="item.reson ? 'success' : 'fail'">
                  {{
                  item.reson ? "正常" : "异常"
                  }}
                </span>
              </li>
            </ul>
          </div>
        </div>
        <div class="elbox2">
          <p class="containcenter_top_title3">巡检记录</p>
          <div class="checkOrder">
            <div
              v-for="(item, index) in timestamps"
              :class="'timeline'+index"
              class="timeline"
              :key="'item' + index"
            >
              <time-line :timestamp="item.timestamp" @over="over" @leave="leave" :type="2" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
let gaugePanel;
import { baseEnv } from "@/request";
import topBar from "@/components/topBar.vue";
import MapWrap from "@/components/map.vue";
// import MapWrap from "@/components/map_copy.vue";
import { renderTime, weekDay, timeAt } from "@/utils/utils";
let echarts = require("echarts/lib/echarts");
const APIURL = require("../../public/ipConfigtest");
let baseUrl;
let time1, time2, time3, time4, time5, time6, time7;
let timer = null;
// import topBar from "@/components/topBar.vue";
// 引入饼状图组件
require("echarts/lib/chart/pie");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
export default {
  data() {
    return {
      isShowWarning: false,
      sypanel1: "width: 100%; height: 25.7%",
      sypanel2: "width: 100%; ",

      aboutTitle: "",
      dailyArr: [],
      curIndex: null,
      timeDate: "", // 日期
      cloudSpeed: "",
      wetNum: "",
      city: "",
      tmpNew: "", //温度
      briefNew: "", // 天气
      nowDayIcon: "",
      weekDay: "",
      precip: "",
      hum: null,
      tem: null,
      timestamps: [
        {
          timestamp: {
            date: time1,
            isCurent: false,
            isLast: false,
            dateTime: [
              {
                time: "8:00",
                event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
                // sumMoney: 0.77,
              }
            ]
          }
        },
        {
          timestamp: {
            date: time2,
            isCurent: false,
            dateTime: [
              {
                time: "8:45",
                isGet: true, //提现
                event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
                // sumMoney: 21.0,
              },
              {
                time: "8:55",
                isGet: true,
                event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
              }
            ]
          }
        },
        {
          timestamp: {
            date: time3,
            isCurent: false,
            dateTime: [
              {
                time: "8:00",
                isGet: true, //提现
                event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
                // sumMoney: 21.0,
              },
              {
                time: "8:21",
                isGet: true,
                event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
              }
            ]
          }
        },
        {
          timestamp: {
            date: time4,
            isCurent: false,
            dateTime: [
              {
                time: "9:00",
                isGet: true, //提现
                event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
                // sumMoney: 21.0,
              },
              {
                time: "9:21",
                isGet: true,
                event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
              }
            ]
          }
        },
        {
          timestamp: {
            date: time5,
            isCurent: false,
            dateTime: [
              {
                time: "8:00",
                isGet: true, //提现
                event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
                // sumMoney: 21.0,
              },
              {
                time: "8:21",
                isGet: true,
                event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
              }
            ]
          }
        },
        {
          timestamp: {
            date: time6,
            isCurent: false,
            dateTime: [
              {
                time: "6:05",
                isGet: true, //提现
                event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
                // sumMoney: 21.0,
              },
              {
                time: "6:11",
                isGet: true,
                event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
              }
            ]
          }
        },
        {
          timestamp: {
            date: time7,
            isCurent: false,
            dateTime: [
              {
                time: "15:00",
                isGet: true, //提现
                event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
                // sumMoney: 21.0,
              },
              {
                time: "14:21",
                isGet: true,
                event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
              }
            ]
          }
        }
      ],
      warningtimestamps: [],
      workingStatus: [
        // {
        //   name: "摄像头",
        //   status: "正常",
        //   icon: "el-icon-video-camera"
        // },
        {
          name: "感应器",
          status: "正常",
          icon: "el-icon-data-line"
        },
        {
          name: "网络传输",
          status: "正常",
          icon: "el-icon-odometer"
        },
        {
          name: "防护栏",
          status: "正常",
          icon: "el-icon-s-data"
        }
      ],
      dialogTableVisible: false,
      imgShiDu: require("../assets/icon/shidu.png"),
      imgTemperature: require("../assets/icon/wenshidutemperature.png"),
      animate: false,
      items2: [
        //消息列表对应的数组
        {
          num: "货架巡检",
          date: "7",
          reson: true
        },
        {
          num: "库区巡检",
          date: "8",
          reson: true
        },
        {
          num: "设备巡检",
          date: "3",
          reson: true
        },
        {
          num: "基站巡检",
          date: "16",
          reson: true
        },
        {
          num: "网络巡检",
          date: "7",
          reson: true
        },
        {
          num: "货架巡检",
          date: "7",
          reson: true
        },
        {
          num: "库区巡检",
          date: "8",
          reson: true
        },
        {
          num: "设备巡检",
          date: "3",
          reson: true
        },
        {
          num: "基站巡检",
          date: "16",
          reson: true
        },
        {
          num: "网络巡检",
          date: "7",
          reson: true
        }
      ],
      totalNum: "52235",
      addNum: "2120",
      monitorState: 95,
      arr: [
        "窍号[Q01GYQV33L]，调阅时间超长",
        "窍号[Q01GYQV49L]，调阅时间超长",
        "窍号[Q01GYQV69L]，调阅时间超长"
      ],
      number: 0,
      number2: -1
    };
  },
  components: {
    topBar,
    MapWrap
  },
  beforeMount() {
    if (window.outerWidth <= 768) {
      this.sypanel1 = {
        height: "8.4rem"
      };
      this.sypanel2 = {
        height: "25%"
      };
    }
  },
  mounted() {
    var dt = new Date();
    let month = parseInt(dt.getMonth() + 1);
    let day = dt.getDate();
    let Minutes = dt.getMinutes();
    if (Minutes < 10) {
      Minutes = "0" + Minutes;
    }
    let linetime1 = dt.getHours() + ":" + Minutes;
    let linetime2 =
      parseInt(dt.getHours() - 1) + ":" + parseInt(parseInt(Minutes) - 1);
    let linetime3 =
      parseInt(dt.getHours() - 2) + ":" + parseInt(parseInt(Minutes) - 1);
    time1 = month + "月" + day + "日";
    time2 = month + "月" + parseInt(parseInt(day) - parseInt(1)) + "日";
    time3 = month + "月" + parseInt(parseInt(day) - parseInt(2)) + "日";
    time4 = month + "月" + parseInt(parseInt(day) - parseInt(3)) + "日";
    time5 = month + "月" + parseInt(parseInt(day) - parseInt(4)) + "日";
    time6 = month + "月" + parseInt(parseInt(day) - parseInt(5)) + "日";
    time7 = month + "月" + parseInt(parseInt(day) - parseInt(6)) + "日";
    this.timestamps = [
      // {
      //   timestamp: {
      //     date: "2021年",
      //     isCurent: false,
      //     dateTime: [
      //       {
      //         time: "",
      //         event: ""
      //         // sumMoney: 0.77,
      //       }
      //     ]
      //   }
      // },
      {
        timestamp: {
          date: time1,
          isCurent: false,
          isLast: false,
          dateTime: [
            {
              time: linetime1,
              event: "库房自动化设备运行状态巡检 [殷孝雅]  正常"
              // sumMoney: 0.77,
            },
            {
              time: linetime2,
              event: "库区温湿度巡检 [殷孝雅]  正常"
              // sumMoney: 0.77,
            },
            {
              time: linetime3,
              event: "库房货架安全检查 [殷孝雅]  正常"
              // sumMoney: 0.77,
            }
          ]
        }
      },

      {
        timestamp: {
          date: time2,
          isCurent: false,
          isLast: true,
          dateTime: [
            {
              time: "9:30",
              event: "室内定位基站巡检 [殷孝雅]  正常"
              // sumMoney: 0.77,
            },
            {
              time: "14:00",
              event: "库房货架安全检查 [殷孝雅]  正常"
              // sumMoney: 0.77,
            }
          ]
        }
      }

      // {
      //   timestamp: {
      //     date: time2,
      //     isCurent: false,
      //     dateTime: [
      //       {
      //         time: "8:45",
      //         isGet: true, //提现
      //         event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
      //         // sumMoney: 21.0,
      //       },
      //       {
      //         time: "8:55",
      //         isGet: true,
      //         event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
      //       }
      //     ]
      //   }
      // },
      // {
      //   timestamp: {
      //     date: time3,
      //     isCurent: false,
      //     dateTime: [
      //       {
      //         time: "8:00",
      //         isGet: true, //提现
      //         event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
      //         // sumMoney: 21.0,
      //       },
      //       {
      //         time: "8:21",
      //         isGet: true,
      //         event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
      //       }
      //     ]
      //   }
      // },
      // {
      //   timestamp: {
      //     date: time4,
      //     isCurent: false,
      //     dateTime: [
      //       {
      //         time: "9:00",
      //         isGet: true, //提现
      //         event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
      //         // sumMoney: 21.0,
      //       },
      //       {
      //         time: "9:21",
      //         isGet: true,
      //         event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
      //       }
      //     ]
      //   }
      // },
      // {
      //   timestamp: {
      //     date: time5,
      //     isCurent: false,
      //     dateTime: [
      //       {
      //         time: "8:00",
      //         isGet: true, //提现
      //         event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
      //         // sumMoney: 21.0,
      //       },
      //       {
      //         time: "8:21",
      //         isGet: true,
      //         event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
      //       }
      //     ]
      //   }
      // },
      // {
      //   timestamp: {
      //     date: time6,
      //     isCurent: false,
      //     dateTime: [
      //       {
      //         time: "6:05",
      //         isGet: true, //提现
      //         event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
      //         // sumMoney: 21.0,
      //       },
      //       {
      //         time: "6:11",
      //         isGet: true,
      //         event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
      //       }
      //     ]
      //   }
      // },
      // {
      //   timestamp: {
      //     date: time7,
      //     isCurent: false,
      //     dateTime: [
      //       {
      //         time: "15:00",
      //         isGet: true, //提现
      //         event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
      //         // sumMoney: 21.0,
      //       },
      //       {
      //         time: "14:21",
      //         isGet: true,
      //         event: "消防湿式系统重点部位巡查\n [殷孝雅]  正常"
      //       }
      //     ]
      //   }
      // }
    ];
    baseUrl = "/customer-aim";
    // if (baseEnv == "development") {
    //   baseUrl = "/b";
    // } else {
    //   // baseUrl = "http://demo.qcdoc.cn/customer-aim";
    //   baseUrl = "http://demo.qcdoc.cn/customer-aim";
    //   // baseUrl = `${APIURL.BASE_URL}`;
    // }
    this.updatewarning();
    let title = this.$route.query.title;
    console.log(123,title);
    
    this.aboutTitle = "档案集约化全景平台";
    // switch (title) {
    //   case "济南市":
    //     this.aboutTitle = "云监控—" + "苏南档案中心（无锡红木）";
    //     this.city = title;
    //     this.monitorState = 92;
    //     break;
    //   case "金华市":
    //     this.aboutTitle = "云监控—" + "苏南档案中心（无锡红木）";
    //     this.city = title;
    //     this.monitorState = 93;
    //     break;
    //   case "无锡市":
    //     this.aboutTitle = "云监控—" + "苏南档案中心（无锡红木）";
    this.city = title || "苏州";
    //     this.monitorState = 93;
    //     break;
    //   case "上海市":
    //     this.aboutTitle = "云监控—" + "苏南档案中心（无锡红木）";
    //     this.city = title;
    //     this.monitorState = 94;
    //     break;
    //   case "南京市":
    //     this.aboutTitle = "云监控—" + "苏南档案中心（无锡红木）";
    //     this.city = title;
    //     this.monitorState = 90;
    //     break;
    //   default:
    //     this.aboutTitle = "档案集约化全景平台";
    //     break;
    // }

    this.timer2 = setInterval(this.scroll2, 3000);
    this.searchWeather();
    let angle = 0; //角度，用来做简单的动画效果的
    let value = 93;
    let timerId = null;
    if (gaugePanel != null && gaugePanel != "" && gaugePanel != "undefined") {
      gaugePanel.dispose();
    }
    gaugePanel = echarts.init(document.getElementById("gaugePanel"));
    let option = {
      title: {
        text: "{a|" + value + "\n" + "}{c|}",
        x: "center",
        y: "center",
        textStyle: {
          rich: {
            a: {
              fontSize: this.$fontSize.fontSize(0.3),
              color: "#29EEF3"
            }
            // c: {
            //   fontSize: 20,
            //   color: "#ffffff"
            //   // padding: [5,0]
            // }
          }
        }
      },
      // backgroundColor: "#08B0F9",
      // title: [
      //   {
      //     text: "档案中心监控状态",
      //     top: "10%",
      //     x: "center",
      //     borderColor: "#fff",
      //     borderWidth: 1,
      //     borderRadius: 10,
      //     // padding: [
      //     //   this.$fontSize.fontSize(0.07),
      //     //   this.$fontSize.fontSize(0.14),
      //     // ],
      //     textStyle: {
      //       fontWeight: "normal",
      //       fontSize: 12,
      //       color: "#fff"
      //     }
      //   }
      // ],
      angleAxis: {
        show: false,
        max: (100 * 360) / 270, //-45度到225度，二者偏移值是270度除360度
        type: "value",
        startAngle: 225, //极坐标初始角度
        splitLine: {
          show: false
        }
      },
      barMaxWidth: this.$fontSize.fontSize(0.1), //最大宽度圆环宽度
      radiusAxis: {
        show: false,
        type: "category"
      },
      //圆环位置和大小
      polar: {
        center: ["50%", "50%"], //中心（圆心）坐标
        radius: "120%" //仪表盘半径，可以是相对于容器高宽中较小的一项的一半的百分比，也可以是绝对的数值。
      },
      series: [
        {
          type: "pie",
          name: "外层细圆环",
          radius: ["98%", "100%"],
          center: ["50%", "50%"],
          hoverAnimation: false,
          clockWise: false,
          itemStyle: {
            normal: {
              color: "#47C9FFFF"
            }
          },
          label: {
            show: false
          },
          data: [300]
        },
        {
          name: "",
          type: "pie",
          radius: ["85%", "70%"],
          silent: true,
          clockwise: true,
          startAngle: 270,
          z: 0,
          zlevel: 0,
          label: {
            normal: {
              position: "center"
            }
          },
          data: [
            {
              value: value,
              name: "",
              itemStyle: {
                normal: {
                  color: {
                    // 完成的圆环的颜色
                    colorStops: [
                      {
                        offset: 0,
                        color: "#00EDF3" // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#646CF9" // 100% 处的颜色
                      }
                    ]
                  }
                }
              }
            },
            {
              value: 100 - value,
              name: "",
              label: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  color: "#173164"
                }
              }
            }
          ]
        },
        //仪表盘
        {
          name: "仪表盘",
          type: "gauge",
          startAngle: 225, //起始角度，同极坐标
          endAngle: -45, //终止角度，同极坐标
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLabel: {
            show: false
          },
          pointer: {
            show: false
          },
          detail: {
            formatter: function() {
              return "优";
            },
            color: "#000",
            fontSize: this.$fontSize.fontSize(0.12),
            offsetCenter: ["5%", "40%"],
            backgroundColor: "#00FF5FFF",
            borderRadius: this.$fontSize.fontSize(0.08),
            padding: [
              this.$fontSize.fontSize(0.04),
              this.$fontSize.fontSize(0.1)
            ]
          }
          // data: [
          //   {
          //     value: this.monitorState,
          //     name: this.monitorState
          //   }
          // ]
        }
      ]
    };

    function draw() {
      angle = angle + 3;
      // myChart.setOption(option, true);
      gaugePanel.setOption(option, true);
      window.addEventListener("resize", function() {
        gaugePanel.resize();
      });
      //window.requestAnimationFrame(draw);
    }
    if (timerId) {
      clearInterval(timerId);
    }
    timerId = setInterval(function() {
      //用setInterval做动画感觉有问题
      draw();
    }, 100);
  },
  watch: {
    // "obj.a": {
    //   handler(newName, oldName) {
    //     console.log("obj.a changed");
    //   },
    //   immediate: true,
    //   // deep: true,
    // },
    // warningtimestamps:{
    //   handler(newName,oldName){
    //   },
    //   deep:true
    // }
  },
  destroyed() {
    clearInterval(this.timer1);
    clearInterval(this.timer2);
    clearInterval(timer);
  },
  methods: {
    updatewarning() {
      timer = setInterval(() => {
        // this.axios
        //   .get(`${baseUrl}/location/getRichAlarm?floorId=2`)
        //   .then(res => {
            // let data = res.data.data || null;
            let data = {
              alarmTime: '1855555526',
              alarmDesc: '哈哈哈哈哈哈'
            }
            if (data) {
              this.isShowWarning = true; // 隐藏
              // console.log(this.isShowWarning, "隐藏");
              this.warningtimestamps.unshift({
                timestamp: {
                  date: renderTime(data.alarmTime),
                  isCurent: false,
                  dateTime: [
                    {
                      time: timeAt(data.alarmTime),
                      event: data.alarmDesc
                      // sumMoney: 0.77,
                    }
                  ]
                }
              });
            } else {
              this.isShowWarning = false; // 展示
              this.warningtimestamps = [];
              console.log(this.isShowWarning, "展示");
            }
          // });



        this.axios
          .get(`${baseUrl}/hygrother/getValue?id=30041945`)
          .then(res => {
            let data = res.data.data || null;
            if (data) {
              (this.tem = data.tem || 22.5), (this.hum = data.hum || 42.8);
            } else {
              this.tem = 22.5;
              this.hum = 42.8;
            }
          });
      }, 2000);
    },
    searchWeather: async function() {
      //注意：这里有 async 用来完成异步操作
      let key = "cc947e6d58bc4e06b122ec72e5ee3e10"; //引号中放入前面保存的key
      //获取城市的ID
      let httpUrl = `https://geoapi.qweather.com/v2/city/lookup?location=${this.city}&key=${key}`;
      let res = await fetch(httpUrl);
      let result = await res.json();
      let id = result.location[0].id;
      //根据城市id获取具体的天气
      let httpUrl1 = `https://devapi.qweather.com/v7/weather/now?location=${id}&key=${key}`;
      let res1 = await fetch(httpUrl1);
      let result1 = await res1.json();
      let now = result1.now;
      this.timeDate = renderTime(now.obsTime);
      this.weekDay = weekDay(now.obsTime);
      this.cloudSpeed = now.windSpeed;
      this.precip = now.precip;
      this.wetNum = now.humidity;
      this.tmpNew = now.temp;
      this.briefNew = now.text;
      this.nowDayIcon = require("@/assets/" + now.icon + ".png");
      //七天
      let httpUrl2 = `https://devapi.qweather.com/v7/weather/3d?location=${id}&key=${key}`;
      let res2 = await fetch(httpUrl2);
      let result2 = await res2.json();
      let daily = result2.daily; // 数组
      let temp = [];
      daily.forEach(item => {
        temp.push({
          ...item,
          iconDay: require("@/assets/" + item.iconDay + ".png"),
          weekDay: weekDay(item.fxDate),
          tempMax: item.tempMax
          // icon: '../../imgs/weather/' + item.daily_forecast_today.cond_code_d+'.png',
        });
      });
      this.dailyArr = temp;
    },
    fullScreen() {
      this.$screenfull.toggle();
    },
    clickHandle(index) {
      // this.$message("查看监控画面");
      console.log(index);
      this.curIndex = index;
      this.dialogTableVisible = true;
    },
    scroll2() {
      let con1 = this.$refs.con2;
      con1.style.marginTop = "-30px";
      this.animate = !this.animate;
      var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
      setTimeout(function() {
        that.items2.push(that.items2[0]);
        that.items2.shift();
        con1.style.marginTop = "0px";
        that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
      }, 500);
    },
    mLeave2() {
      this.timer1 = setInterval(this.scroll, 3000);
    },
    mEnter2() {
      clearInterval(this.timer1);
    },
    leave(data) {
      this.updatewarning();
      var index;
      if (data[1] == 1) {
        index = this.warningtimestamps.findIndex(item => {
          return (
            item.timestamp.date == data[0].date &&
            item.timestamp.dateTime[0].event == data[0].dateTime[0].event &&
            item.timestamp.dateTime[0].time == data[0].dateTime[0].time
          );
        });
        this.$set(this.warningtimestamps[index].timestamp, "isCurent", false);
      } else {
        index = this.timestamps.findIndex(item => {
          return (
            item.timestamp.date == data[0].date &&
            item.timestamp.dateTime[0].event == data[0].dateTime[0].event &&
            item.timestamp.dateTime[0].time == data[0].dateTime[0].time
          );
        });
        this.$set(this.timestamps[index].timestamp, "isCurent", false);
      }
    },
    over(data) {
      clearInterval(timer);
      var index;
      if (data[1] == 1) {
        index = this.warningtimestamps.findIndex(item => {
          return (
            item.timestamp.date == data[0].date &&
            item.timestamp.dateTime[0].event == data[0].dateTime[0].event &&
            item.timestamp.dateTime[0].time == data[0].dateTime[0].time
          );
        });
        this.$set(this.warningtimestamps[index].timestamp, "isCurent", true);
      } else {
        index = this.timestamps.findIndex(item => {
          return (
            item.timestamp.date == data[0].date &&
            item.timestamp.dateTime[0].event == data[0].dateTime[0].event &&
            item.timestamp.dateTime[0].time == data[0].dateTime[0].time
          );
        });
        this.$set(this.timestamps[index].timestamp, "isCurent", true);
      }
    }
  }
};
</script>
<style>
.el-dialog__body {
  padding: 0;
}

.el-timeline-item__content {
  color: white;
}

.el-timeline-item__timestamp.is-bottom {
  color: skyblue;
}

.el-timeline-item__node--normal {
  background-color: skyblue;
}

.el-timeline-item__tail {
  border-left: 2px solid skyblue;
}
</style>
<style scoped>
.pos {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  white-space: nowrap;
}
.weather-temp {
  font-size: 0.2rem;
  margin-right: 4px;
}
.logo {
  margin-left: 0.125rem;
}

.fullDiv {
  height: 100%;
  margin-left: auto;
  margin-right: 0.185rem;
}

.fullScreen {
  background-color: #409eff;
  border-color: transparent;
  padding: 0 0.5rem;
  border: none;
  height: 60%;
  margin-top: 5%;
  color: #fff;
}

.fullScreen:hover,
.fullScreen:focus {
  background-color: rgb(111, 146, 243);
  color: #fff;
}

.about {
  color: #fff;
  min-height: 100%;
  /* height: auto !important; */
  height: 100%;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  background-color: #06164a;
  /* background: url("../assets/image/background1.png") no-repeat center; */
}

.about_top {
  display: flex;
  background-color: rgb(16, 26, 81);
  padding: 0.1rem 0;
  height: 1rem;
}

.about_top p {
  margin: 0;
}

.about_top p img {
  height: 0.5rem;
}

.about_top p {
  width: 40%;
}

.about_top_l {
  width: 50%;
  font-size: 0.2rem;
  margin-left: 0.185rem;
  line-height: 0.3rem;
}

.about_top_r {
  width: 50%;
  font-size: 0.3rem;
  line-height: 0.3rem;
}

.aboutContainer {
  display: flex;
  height: calc(100% - 1.5rem);
  margin-top: 0.185rem;
  width: 98%;
  margin-left: 1%;
}

.containLeft {
  /* width: 4.75rem; */
  width: 25%;
}

#gaugePanel {
  /* background-color: #051d64; */
  margin-top: 0.1rem;
  height: 40%;
}
.MonitorRunning {
  flex: 1;
  /* background: url("../assets/image/lbg.png") no-repeat;
  background-size: cover; */
}
.MonitorRunning h1 {
  text-align: center;
  font-size: 0.2rem;
  padding: 6px 0;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #ffffff;
  background: linear-gradient(
    90deg,
    rgb(0, 0, 0, 0) 0%,
    rgba(0, 88, 179, 0.99) 51%,
    rgba(0, 88, 179, 0) 100%
  );
}
.MonitorRunning .running {
  width: 80%;
  margin: 0 auto;
  justify-content: space-between;
  height: calc(55% - 0.5rem);
  margin-top: 2%;
}
.MonitorRunning .running .run {
  text-align: center;
  height: 100%;
}
.MonitorRunning .running .run img {
  /* height: 0.7rem; */
  height: 50%;
}
.MonitorRunning .running .run p {
  color: #fff;
  font-size: 0.16rem;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #ffffff;
}
.successtag {
  /* border: 1px solid #00ff5f;
  border-radius: 2px;
  font-size: 10px;
  font-family: Source Han Sans CN;
  font-weight: 400; */
  color: #00ff5f;
  font-size: 0.16rem;
  /* line-height: 22px;
  text-shadow: 0px 2px 3px rgba(0, 129, 48, 0.4);
  padding: 5px 10px; */
}
.elbox {
  height: 40%;
  margin-top: 0.15rem;
}
.elbox5 {
  height: 15%;
  margin-top: 0.15rem;
}
.elbox1 {
  height: 100%;
}

.elbox2 {
  height: calc(100% - 4.2rem);
  margin-top: 0.1rem;
  background-color: #08285f4d;
}

.elbox3 {
  height: 10%;
}

.elbox4 {
  height: 35%;
  margin-top: 0.15rem;
}

.containcenterBox {
  /* flex: 1; */
  width: 50%;
  margin-left: 10px;
  margin-right: 10px;
  /* background: url("../assets/image/center.png") no-repeat top center;
  background-size: 100% 100%; */
}

.containcenter {
  box-sizing: border-box;
  /* background-color: rgb(16, 26, 81); */
  /* margin-top: 0.1rem; */
  margin-bottom: 0.1rem;
  /* border: 1px solid blue; */
  position: relative;
  height: calc(100% - 0.085rem);
}

.containcenter_top {
  height: 0.5rem;
  text-align: center;
}

.containcenter_top_title {
  font-size: 0.2rem;
  line-height: 0.2rem;
  text-align: center;
  padding: 6px 0;
  background: linear-gradient(
    90deg,
    rgb(0, 0, 0, 0) 0%,
    rgba(0, 88, 179, 0.99) 51%,
    rgba(0, 88, 179, 0) 100%
  );
}
.containcenter_top_title3 {
  font-size: 0.2rem;
  line-height: 0.2rem;
  text-align: center;
  padding: 6px 0;
  background: linear-gradient(
    90deg,
    rgb(0, 0, 0, 0) 0%,
    rgba(0, 88, 179, 0.99) 51%,
    rgba(0, 88, 179, 0) 100%
  );
  /* text-align: center;
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translate(-50%, -50%); */
}
.containcenter_top_title2 {
  font-size: 0.3rem;
  text-align: center;
  width: 100%;

  top: 1%;

  position: absolute;
}
.r_status {
  display: flex;
  margin-bottom: 2%;
}
.r_status .left {
  /* width: calc(302 / 531) * 100%; */
  width: 58.6%;
  height: 100%;
  position: relative;
  margin-right: 4px;
}
.r_status .right {
  width: 41.4%;
  height: 100%;
  position: relative;
}
.ab {
  position: absolute;
  top: -0.18rem;
}
.ab2 {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}
.l-value {
  font-size: 0.18rem;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #ff1e1e;
  left: calc(50% - 0.36rem);
}
.l-value2 {
  font-size: 0.18rem;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #fff;
  left: calc(50% - 0.18rem);
}
.r_status .left img,
.r_status .right img {
  width: 100%;
}
.checkStatus,
.checkOrder {
  width: 98%;
  /* height: 5.5rem; */
  overflow-y: auto;
  height: auto;
  margin: 0 auto;
  /* border: 1px solid rgb(111, 146, 243); */
  padding-bottom: 0.1rem;
}
.checkStatus {
  margin-bottom: 2%;
}
.checkOrder {
  height: calc(100% - 0.2rem);
  overflow-y: auto;
  overflow-y: scroll;
  scrollbar-color: transparent transparent;
  scrollbar-track-color: transparent;
  -ms-scrollbar-track-color: transparent;
  position: relative;
}
/* .checkOrder {
  background: url("../assets/image/b-bg.png") no-repeat top center;
  background-size: 100% 100%;
} */
.containcenter_top > p {
  font-size: 0.25rem;
}

.containRight {
  width: 25%;
  /* margin-top: 0.1rem; */
}

.containcenter_con {
  /* height: calc(100% - 0.5rem); */
  /* height: 62.6%; */
  height: calc(100% - 0.185rem);
  width: 98%;
  margin-left: 1%;
  position: relative;
}
.personDesc {
  position: absolute;
  top: 10%;
  left: 10%;
}
.personDesc p:nth-child(1) {
  margin-bottom: 10px;
}
.personDesc p img {
  width: 0.2rem;
}
.personDesc p span {
  font-size: 0.18rem;
}
.containcenter_con_top {
  width: 100%;
  height: 70%;
}

.containcenter_con_bottom {
  display: flex;
  height: 100%;
  /* height: 25%; */
  /* height: 2.5rem; */
}

.timeline {
  margin-left: 1%;
  /* margin-top: 0.185rem; */
  width: 100%;
  /* border: 1px solid rgb(111, 146, 243); */
  /* height: 100%; */
  /* overflow: hidden; */
  overflow-y: auto;
  overflow-y: scroll;
  scrollbar-color: transparent transparent;
  scrollbar-track-color: transparent;
  -ms-scrollbar-track-color: transparent;
}
.timeline0 {
  margin-top: 2%;
}
.timeline::-webkit-scrollbar,
.checkOrder::-webkit-scrollbar {
  width: 2px;
  /*height: 4px;*/
}

.timeline::-webkit-scrollbar-thumb,
.checkOrder::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}

.timeline::-webkit-scrollbar-track,
.checkOrder::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

.flexBox {
  display: flex;
  flex-wrap: wrap;
  width: 96%;
  margin-left: 2%;
}
.flex {
  display: flex;
}
.leftBoxWrap {
  display: flex;
  justify-content: space-around;
  align-content: space-around;
  flex-wrap: wrap;
  width: 49%;
}

.leftBox {
  /* width: 48%; */
  width: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.leftBox:nth-child(even) {
  margin-left: 0.185rem;
}

.statusDesc {
  width: 50%;
  color: #02a6b5;
  line-height: 0.35rem;
}

.statusing {
  margin-left: auto;
  margin-right: 0.285rem;
}

.imgBox {
  height: 100%;
  position: relative;
}

.imgBoxImg {
  width: 100%;
  height: 100%;
}

.icon {
  width: 0.4rem;
  height: 0.4rem;
  position: absolute;
}

.icon0 {
  /* top: 0.15rem;
  left: 1.05rem; */
  top: 1%;
  left: 8%;
  z-index: 33;
}

.icon1 {
  /* top: 0.15rem;
  left: 4.1rem; */
  top: 1%;
  left: 30%;
  z-index: 33;
}

.icon2 {
  top: 1%;
  left: 60%;
  z-index: 33;
}

.icon3 {
  top: 1%;
  left: 90%;
  z-index: 33;
}

.icon4 {
  top: 15%;
  left: 8%;
}

.icon5 {
  top: 15%;
  left: 30%;
}

.icon6 {
  top: 15%;
  left: 60%;
}

.icon7 {
  top: 15%;
  left: 90%;
}

.icon8 {
  top: 35%;
  left: 8%;
}

.icon9 {
  top: 35%;
  left: 30%;
}

.icon10 {
  top: 35%;
  left: 60%;
}

.icon11 {
  top: 35%;
  left: 90%;
}

.icon12 {
  top: 55%;
  left: 8%;
}

.icon13 {
  top: 55%;
  left: 18%;
}

.icon14 {
  top: 55%;
  left: 60%;
}

.icon15 {
  top: 55%;
  left: 88%;
}
.leftT {
  height: 32%;
  background-color: #08285f4d;
  margin-bottom: 2%;
}
.leftB {
  /* height: 70%; */
  height: calc(66% - 42px);
}
.leftB h1 {
  text-align: center;
  font-size: 0.2rem;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #ffffff;
  padding: 6px 0;
  background: linear-gradient(
    90deg,
    rgb(0, 0, 0, 0) 0%,
    rgba(0, 88, 179, 0.99) 51%,
    rgba(0, 88, 179, 0) 100%
  );
  margin-bottom: 13px;
}
.wetstatus {
  width: 98%;
  margin-left: 1%;
}
.boxW {
  width: 100%;
  height: calc(25% - 0.15rem);
  background: url("../assets/image/lb.png") no-repeat top center;
  display: flex;
  background-size: 100% 100%;
  align-items: center;
  margin-top: 13px;
}
.boxW .left {
  position: relative;
  width: 33.3%;
  height: 100%;
}
.boxW .left span {
  color: #f08300ff;
}
.boxW .center {
  width: 30%;
}
.boxW .right {
  width: 33.3%;
  margin-left: auto;
}
.boxW .center p {
  text-align: center;
}
.boxW .center p span {
  font-size: 0.16rem;
}
.boxW .center p .strong {
  font-size: 0.28rem;
  font-family: Bahnschrift;
  font-weight: normal;
  color: #ffffff;
}
.boxW .right .successState {
  display: inline-block;
  border: 1px solid #00ff5f61;
  border-radius: 2px;
  font-size: 0.14rem;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #00ff5f;
  text-shadow: 0px 2px 3px rgba(0, 129, 48, 0.4);
  padding: 0.02rem 0.08rem;
  margin-left: 25%;
}
.mt {
  margin-top: 5%;
}
.boxW .left img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  transform: translate(-50%, -50%);
}
.boxW .left span {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -30%);
  font-size: 0.22rem;
}
.totalNum {
  display: flex;
  /* margin-top: 0.2rem; */
  height: 1rem;
  /* margin-top: calc(100% - 1.5rem);
    margin-left: 0.2rem; */
  padding: 0 0.25rem;
  margin-top: calc(50% - 0.758rem);
}
.wetnum {
  color: #02a6b5;
  font-size: 0.25rem;
  margin-left: 0.1rem;
}
.statusBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.wetDesc {
  line-height: 0.25rem;
  margin-left: 0.1rem;
}

.success {
  color: chartreuse;
}

.fail {
  color: red;
}

.imglist {
  height: 50%;
}

.imglist img {
  height: 98%;
  width: 98%;
  margin-left: 1%;
  margin-top: 1%;
}

#box {
  overflow: hidden;
  transition: all 0.5s;
  height: 2.35rem;
  position: relative;
  /* background: rgba(255, 255, 255, 0.04); */
  background-color: #08285f4d;
}

.anim {
  transition: all 0.5s;
}

#con2 {
  padding-top: 0.25rem;
}

#con2 li {
  line-height: 0.35rem;
  width: 100%;
  /* background-color: rgb(22, 24, 24); */

  /* border-bottom: 1px solid #fff; */
  position: relative;
  padding: 3px 0.1rem;
  display: table;
}
#con2 li:nth-child(even) {
  background: rgba(1, 84, 172, 0.24);
}
.li_absolute {
  display: none;
}
#con2 li span {
  display: table-cell;
  vertical-align: middle;
  width: 33.3%;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  font-size: 0.16rem !important;
}
/* #con2 li:hover .li_absolute {
  display: block;
  position: absolute;
  top: -100%;

  background-color: #0154acff;
  color: #fff;
  font-size: 0.16rem;
} */

.wrapBoxFlex {
  /* background-color: blueviolet; */
  /* display: flex;
  justify-content: center;
  align-content: center; */
}

.pTitle {
  width: 100%;
  height: 0.35rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #08285ff8;
}
.pTitle span {
  display: inline-block;
  width: 33.3%;
  color: #70bcfaff;
  font-size: 0.2rem;
  text-align: center;
  padding: 0.05rem 0;
}

.center {
  justify-content: space-around;
}

.panel {
  position: relative;
  /* height: 3.875rem; */
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: rgba(255, 255, 255, 0.04) url(../assets/line\(1\).png);
  /* padding: 0 0.1875rem 0; */
  margin-bottom: 0.15rem;
}

.panel::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
  border-radius: 20%;
}

.panel::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
  border-radius: 20%;
}

.panel .panel-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

.panel .panel-footer::before {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
  border-radius: 20%;
}

.panel .panel-footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #02a6b5;
  border-right: 2px solid #02a6b5;
  border-radius: 20%;
}

/* @media only screen and (max-width: 1366px) {
  .leftBoxWrap {
    width: 100%;
  }
} */
@media only screen and (max-width: 768px) {
  .aboutContainer {
    flex-wrap: wrap;
  }

  .wetstatus {
    width: 100%;
    justify-content: space-around;
  }

  .containRight,
  .containLeft,
  .containcenter {
    flex: 1;
    width: 100%;
  }
}

.container {
  width: 2rem;
  height: 2rem;
  position: absolute;
  z-index: 100;
  right: 0;
}
.delete {
  text-align: right;
  margin-right: 4px;
}
.type {
  text-align: center;
}

.ico {
  position: absolute;
  left: 20%;
  top: 29%;
  width: 1.2rem;
  height: 1.2rem;
  background: rgba(255, 255, 255, 0.04) url(../assets/warning.png) no-repeat
    center;
  background-size: 100%;
}
/*动画*/

.ico {
  -webkit-animation: Tada 1s 2s both infinite;
  -moz-animation: Tada 1s 2s both infinite;
  -ms-animation: Tada 1s 2s both infinite;
  animation: Tada 1s 2s both infinite;
}
/*浏览器兼容性部分略过*/

@keyframes Tada {
  0% {
    transform: scale(1);
    transform: scale(1);
  }
  10%,
  20% {
    transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }
  30%,
  50%,
  70%,
  90% {
    transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }
  40%,
  60%,
  80% {
    transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }
  100% {
    transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}
</style>
